<ion-header no-border>
    <ion-toolbar>
        <ion-segment mode="md" [(ngModel)]="vm.selectedSegment">
            <ion-segment-button value="s0" (ionSelect)="goToSlide(0)">
                群聊
                <div class="bolder-sm"></div>
            </ion-segment-button>
            <ion-segment-button value="s1" (ionSelect)="goToSlide(1)">
                私聊
                <div class="bolder-sm"></div>
            </ion-segment-button>

        </ion-segment>
    </ion-toolbar>
</ion-header>

<ion-content *ngIf="staus">
    <ion-slides centeredSlides="false" zoom="false" (ionSlideDidChange)="onSlideDidChange()">
        <ion-slide>
            <ion-list>
                <ion-item *ngFor="let item of vm.explainList" tappable (click)="onChat(item)">
                    <ion-avatar item-left>
                        <img src="{{item.header}}">
                    </ion-avatar>
                    <h2>{{item.friendName}}</h2>
                    <p>{{item.message}}</p>
                </ion-item>
            </ion-list>
        </ion-slide>
        <ion-slide>
            <ion-list>
                <ion-item *ngFor="let item of vm.contactList" tappable (click)="onChat(item)">
                    <ion-avatar item-left>
                        <img src="{{item.header}}">
                    </ion-avatar>
                    <h2>{{item.friendName}}</h2>
                    <p>{{item.message}}</p>
                </ion-item>
            </ion-list>
        </ion-slide>
    </ion-slides>
</ion-content>